<template>  
    <section class="product-list">  
      <h2>热门商品</h2>  
      <div class="product-item" v-for="product in products" :key="product.id">  
        <h3>{{ product.name }}</h3>  
        <p>价格: {{ product.price }} 元</p>  
        <img :src="product.image" alt="商品图片" />  
      </div>  
    </section>  
  </template>  
    
  <script>  
  export default {  
    name: 'ProductList',  
    data() {  
      return {  
        products: [  
          { id: 1, name: '二手iPhone 12', price: 4500, image:'https://www.helloimg.com/i/2024/10/24/671a3d5c91b75.jpg' },  
          { id: 2, name: '二手MacBook Pro', price: 8000, image: 'https://www.helloimg.com/i/2024/10/24/671a3e57f080e.jpg' },  
          { id: 3, name: '二手iPad Air', price: 2500, image: 'https://www.helloimg.com/i/2024/10/24/671a3ede9de67.jpg' }  
        ]  
      };  
    }  
  }  
  </script>  
    
  <style scoped>  
  .product-list {  
    display: flex;  
    flex-wrap: wrap;  
    justify-content: space-around;  
  }  
    
  .product-item {  
    flex: 1 1 calc(33.333% - 20px);  
    box-sizing: border-box;  
    margin: 10px;  
    border: 1px solid #ccc;  
    padding: 10px;  
    text-align: center;  
  }  
    
  .product-item img {  
    max-width: 100%;  
    height: auto;  
  }  
  </style>